<template>
	<view class="profile">
		<view class="mask-layer-black" @tap.stop="MaskHide()" v-show="maskLayer"></view>
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>

		<view class="container">
			<view class="bg-blue-circle"></view>
			<view class="iconfont setting" @tap="To_setting()">&#xe70f;</view>
			<view class="head-box">
				<view class="avatar">
					<image :src="userInfo.avatar_cloudPath" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">{{userInfo.name}} </view>
					<view class="state">
						<view class="status">{{userInfo.status}}</view>
						<view class="address">{{userInfo.address}}</view>
					</view>
				</view>
				<view class="iconfont more-info" @tap="To_details()">个人资料 &#xe683;</view>
			</view>
			<view class="body-box">
				<view class="button-group">
					<view class="button" :class="{'active':button[0]}" @tap="ChooseElementPart(0)">音乐</view>
					<view class="button" :class="{'active':button[1]}" @tap="ChooseElementPart(1)">博客</view>
					<view class="button" :class="{'active':button[2]}" @tap="ChooseElementPart(2)">笔记</view>
				</view>
				<scroll-view class="album" scroll-y="true">
					<view class="item my-like">
						<view class="cover"></view>
						<view class="info">
							<view class="name">我喜欢的歌</view>
							<view class="quantity">439首</view>
						</view>
					</view>
					<view class="item albumList" v-for="(item,index) in albumList" :key="index"
						@tap="To_albumDetails(index)">
						<view class="cover">
							<image :src="item.coverPath"></image>
						</view>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="quantity">{{item.number}}首</view>
						</view>
					</view>
					<view class="item create-new-album" @tap="CreateNewAlbum()">
						<view class="iconfont cover">
							&#xe744;
						</view>
						<view class="info">
							<view class="name">新建歌单</view>
						</view>
					</view>
					<view class="blank"></view>
				</scroll-view>
			</view>
			<view class="foot">

			</view>
		</view>

		<view class="window-create-new-album" v-if="isCreateNewAlbum">
			<view class="head">
				<view class="cancel">取消</view>
				<view class="complete" :class="{'active':createNewAlbum_isInputName}" @tap="createNewAlbum_submit()">完成
				</view>
			</view>
			<view class="input">
				<input placeholder="输入新建歌单标题" @input="CreateNewAlbum_inputName()" v-model="newAlbum.name" />
				<view class="info">
					<view class="text">{{20 - createNewAlbum_numberOfWords}}</view>
					<view class="iconfont clear" v-if="createNewAlbum_isInputName" @tap="CreateNewAlbum_clearName()">
						&#xe64d;</view>
				</view>
			</view>
			<view class="option" @tap="SetPrivateAlbum()">
				<view class="iconfont checkBox">{{isSetPrivateAlbum?"&#xe65b;":"&#xe623"}}</view>
				<view class="text">设置为隐私歌单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		DetermineWeatherToLogIn
	} from '@/utils/common.js';
	import headBarWX from '@/components/headBarWX/headBarWX.vue'
	import headBarAPP from '@/components/headBarAPP/headBarAPP.vue'
	// 导入云对象
	const cloudMusic = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});
	const Album = uniCloud.importObject('Album', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				//信息
				userInfo: {
					_id: 'asdjhajhdbjashdbsj',
					name: '姓名',
					avatar: '',
					number: '15826006178',
					address: '武汉市',
					status: '管理员'
				},
				newAlbum: {
					name: '',
					private: false,
				},
				albumList: [],

				// 标识变量
				button: [1, 0, 0],
				isLogIn: false,
				maskLayer: false,
				isCreateNewAlbum: false,
				createNewAlbum_isInputName: false,
				createNewAlbum_numberOfWords: 0,
				isSetPrivateAlbum: false,
				bodyBox_height: 0,
			}
		},
		onShow() {
			// 判断是否登录
			DetermineWeatherToLogIn();

			// 获取个人信息
			const app = getApp();
			this.userInfo = app.userInfo;

			this.GetAlbumList_e_albumList();

			// 获取屏幕高度
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		const screenHeight = res.screenHeight;
			// 		console.log("screenHeight:", screenHeight);

			// 		// 获取顶部元素距离顶部的距离
			// 		uni.createSelectorQuery()
			// 			.select('.body-box')
			// 			.boundingClientRect((rect) => {
			// 				console.log(rect.top);
			// 				if (rect) {
			// 					// 计算剩余高度
			// 					const contentHeight = screenHeight - rect.top;
			// 					console.log(contentHeight);
			// 					this.bodyBox_height = contentHeight;
			// 				}
			// 			})
			// 			.exec();
			// 	},
			// });

		},
		methods: {
			/** 获取个人专辑列表
			 * 
			 */
			GetAlbumList_e_albumList() {
				Album.GetAlbumList_e_albumList(this.userInfo._id).then(res => {
					console.log(res);
					this.albumList = res;
				});
			},

			/** 重置歌单
			 * 
			 */
			resetAlbum() {
				// 删除歌单
				Album.GetAlbumList_e_albumList().then(res1 => {
					let albumList = res1.data;
					console.log('所有歌单：', albumList);
					Album.deleteAlbum(albumList).then(res2 => {
						console.log(res2);
					});
				});
				return 0;
			},
			/** 重置歌曲
			 * 
			 */
			resetMusic() {
				cloudMusic.getMusicList().then(res => {
					let musicInfos = res.data;
					console.log(musicInfos);
					cloudMusic.deleteMusic(musicInfos).then(res => {
						console.log(res);
					});
				});
			},
			ChooseElementPart(n) {
				console.log(n);
				this.button[0] = 0;
				this.button[1] = 0;
				this.button[2] = 0;
				this.button[n] = 1;
				this.$forceUpdate()
			},
			/** 前往设置页面
			 * 
			 */
			To_setting() {
				uni.navigateTo({
					url: "/pages/personalPage/setting/setting"
				})
			},
			/** 前往个人主页
			 * 
			 */
			To_details() {
				if (DetermineWeatherToLogIn()) {
					uni.navigateTo({
						url: '/pages/personalPage/details/details',
					});
				}
			},
			/** 前往歌单详情
			 * 
			 */
			To_albumDetails(index) {
				const personalAlbum = {
					albumID: this.albumList[index]._id,
					personalAlbum: true,
				}
				console.log(personalAlbum);
				uni.navigateTo({
					url: "/pages/album/album?albumInfo=" + JSON.stringify(personalAlbum),
				});
			},


			/** 创建新歌单
			 * 
			 */
			CreateNewAlbum() {
				console.log("创建歌单");
				this.isCreateNewAlbum = true;
				this.maskLayer = true;
			},
			/** 输入新歌单标题
			 * 
			 */
			CreateNewAlbum_inputName() {
				console.log('输入标题', this.newAlbum.name);
				if (this.newAlbum.name.length != 0) {
					this.createNewAlbum_isInputName = true;
					this.createNewAlbum_numberOfWords = this.newAlbum.name.length;
				} else {
					this.createNewAlbum_isInputName = false;
					this.createNewAlbum_numberOfWords = 0;
				}
			},
			/** 清除新歌单标题
			 * 
			 */
			CreateNewAlbum_clearName() {
				console.log('清除标题');
				this.newAlbum.name = '';
				this.createNewAlbum_numberOfWords = 0;
				this.createNewAlbum_isInputName = false;
			},
			/** 设置私人歌单
			 * 
			 */
			SetPrivateAlbum() {
				console.log('设置为隐私歌单');
				this.isSetPrivateAlbum = !this.isSetPrivateAlbum;
			},
			/** 输入新歌单标题
			 * 
			 */
			createNewAlbum_submit() {
				this.newAlbum.private = this.isSetPrivateAlbum;
				this.newAlbum.user_id = this.userInfo._id;
				this.maskLayer = false;
				this.isCreateNewAlbum = false;
				console.log('创建歌单', this.newAlbum);

				Album.CreateAlbum(this.newAlbum).then(res => {
					console.log(res);
					this.GetAlbumList_e_albumList();
					this.newAlbum = {
						name: "",
						private: false,
					}
				});
			},

			/** 隐藏遮罩
			 * 
			 */
			MaskHide() {
				this.maskLayer = false;
				this.isCreateNewAlbum = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-blue-circle {
		position: fixed;
		left: 50%;
		transform: translate(-50%, -74%);
		z-index: 0;
		width: 1200rpx;
		height: 1200rpx;
		background-color: rgba(89, 160, 255, 1);
		border-radius: 50%;
	}

	.setting {
		position: fixed;
		top: 20rpx;
		right: 30rpx;
		z-index: 2;
		font-size: $icon-size-l-m;
	}

	.head-box {
		height: 230rpx;
		background-color: white;
		margin-top: 90rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		border-radius: 40rpx;
		position: relative;
		box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);

		.avatar {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			width: 180rpx;
			height: 180rpx;
			background-color: blanchedalmond;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.05);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			position: absolute;
			left: 230rpx;
			top: 60rpx;

			.name {
				font-size: $font-size-l-m;
			}

			.state {
				display: flex;
				align-items: center;
				font-size: $font-size-m-s;

				.status {
					padding: 10rpx;
					border-radius: 10rpx;
					color: rgba(0, 0, 255, 0.6);
				}

				.address {
					margin-left: 10rpx;
				}
			}
		}

		.more-info {
			position: absolute;
			right: 20rpx;
			top: 100rpx;
			font-size: $font-size-s-l;
			opacity: 0.5;
		}
	}

	.body-box {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 78vh;
		background-color: white;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, 0.1);

		.button-group {
			display: flex;
			justify-content: space-between;
			font-size: $font-size-m-l;
			margin-top: 20rpx;
			color: rgba(0, 0, 0, 0.5);

			.button:first-child {
				margin-left: 100rpx;
			}

			.button:last-child {
				margin-right: 100rpx;
			}

			.button.active {
				color: rgba(0, 0, 0, 1);
				border-bottom: 5rpx solid red;
			}
		}

		.album {
			height: 100%;;
			padding-top: 20rpx;

			.item {
				overflow: visible;
				position: relative;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.cover {
					margin-left: 20rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					background-color: rgba(0, 0, 0, 0.05);
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: absolute;
					left: 170rpx;
					top: 50%;
					transform: translateY(-50%);

					.name {
						font-size: $font-size-m-m;
					}

					.quantity {
						margin-top: 6rpx;
						font-size: $font-size-s-l;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
			
			.blank{
				height: 200rpx;
			}
		}

		.create-new-album {
			.cover {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: $icon-size-l-m;
				color: rgba(0, 0, 0, 0.3);
			}
		}


	}

	.window-create-new-album {
		z-index: 100;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background-color: white;
		height: 500rpx;
		width: 100vw;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.05);

		.head {
			background-color: green;
			position: relative;

			.cancel {
				top: 30rpx;
				left: 40rpx;
				position: absolute;

			}

			.complete {
				top: 30rpx;
				right: 40rpx;
				position: absolute;
				color: rgba(0, 0, 0, 0.4);
			}

			.complete.active {
				color: black;
			}
		}

		.input {
			position: relative;

			input {
				height: 100rpx;
				margin-top: 100rpx;
				margin-left: 40rpx;
				margin-right: 40rpx;
				background-color: rgba(0, 0, 0, 0.04);
				border-radius: 20rpx;
				font-size: $font-size-m-l;
				padding-left: 20rpx;
				padding-right: 20rpx;
			}

			.info {
				position: absolute;
				display: flex;
				align-items: center;
				top: 50%;
				transform: translateY(-50%);
				right: 60rpx;

				.text {
					color: rgba(0, 0, 0, 0.4);
				}

				.clear {
					margin-left: 20rpx;
				}
			}
		}

		.option {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 220rpx;
			display: flex;
			align-items: center;

			.checkBox {
				transform: translateY(3rpx);
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				font-size: $icon-size-s-m;
				color: rgba(0, 0, 0, 0.7);
			}

			.text {
				font-size: $font-size-m-m;
				color: rgba(0, 0, 0, 0.7);
			}
		}
	}
</style>